<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IconHunter V2 - 设置</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: {
                            50: '#eef2ff',
                            100: '#e0e7ff',
                            200: '#c7d2fe',
                            300: '#a5b4fc',
                            400: '#818cf8',
                            500: '#6366f1',
                            600: '#4f46e5',
                            700: '#4338ca',
                            800: '#3730a3',
                            900: '#312e81'
                        },
                        pastel: {
                            blue: '#A7C7E7',
                            green: '#C1E1C1',
                            pink: '#FAC8C3',
                            yellow: '#FFF2B3',
                            purple: '#D1C2E0'
                        }
                    },
                    animation: {
                        'bounce-slow': 'bounce 3s infinite',
                        'pulse-slow': 'pulse 4s infinite',
                        'wiggle': 'wiggle 1.5s ease-in-out infinite',
                        'float': 'float 5s ease-in-out infinite',
                        'spin-slow': 'spin 8s linear infinite'
                    },
                    keyframes: {
                        wiggle: {
                            '0%, 100%': { transform: 'rotate(-2deg)' },
                            '50%': { transform: 'rotate(2deg)' },
                        },
                        float: {
                            '0%, 100%': { transform: 'translateY(0)' },
                            '50%': { transform: 'translateY(-10px)' },
                        }
                    }
                }
            }
        }
    </script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" rel="stylesheet">
    <style>
        body {
            -webkit-user-select: none;
            user-select: none;
            overflow: hidden;
            background-color: #f8f9fa;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
        }
        
        .no-scrollbar::-webkit-scrollbar {
            display: none;
        }
        
        .no-scrollbar {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
        
        .settings-card {
            transition: all 0.3s ease;
        }
        
        .settings-card:hover {
            transform: translateY(-2px);
        }
        
        .blob-background {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            opacity: 0.05;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 500 500' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 446.3 261.8 C 444.4 324.3 416.9 385.5 369.3 418.1 C 321.7 450.7 254 454.8 199.9 429.5 C 145.8 404.2 105.4 349.4 90.6 290.4 C 75.8 231.4 86.6 168.1 119.7 119.8 C 152.8 71.5 208.1 38.2 266.1 34.2 C 324.1 30.2 384.7 55.5 422.7 101 C 460.7 146.5 476.1 212.2 466.2 270.6 C 463.3 290.8 453.9 310.5 446.3 261.8 Z' fill='%233b82f6'%3E%3C/path%3E%3C/svg%3E");
            background-size: cover;
            background-position: center;
        }
        
        .switch {
            position: relative;
            display: inline-block;
            width: 46px;
            height: 26px;
        }
        
        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        
        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: .4s;
            border-radius: 34px;
        }
        
        .slider:before {
            position: absolute;
            content: "";
            height: 18px;
            width: 18px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }
        
        input:checked + .slider {
            background-color: #6366f1;
        }
        
        input:checked + .slider:before {
            transform: translateX(20px);
        }
        
        .setting-icon {
            transition: all 0.3s ease;
        }
        
        .settings-card:hover .setting-icon {
            transform: scale(1.1);
        }
        
        .profile-card {
            transition: all 0.3s ease;
        }
        
        .profile-card:hover {
            transform: scale(1.02);
        }
        
        .button-primary {
            transition: all 0.3s ease;
        }
        
        .button-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 15px -3px rgba(99, 102, 241, 0.1), 0 4px 6px -2px rgba(99, 102, 241, 0.05);
        }
        
        .button-secondary {
            transition: all 0.3s ease;
        }
        
        .button-secondary:hover {
            transform: translateY(-2px);
        }
        
        .floating-dots {
            position: absolute;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: -1;
        }
        
        .dot {
            position: absolute;
            border-radius: 50%;
            opacity: 0.1;
        }
        
        .dot-1 {
            width: 50px;
            height: 50px;
            background-color: #6366f1;
            top: 10%;
            left: 10%;
            animation: float 7s ease-in-out infinite;
        }
        
        .dot-2 {
            width: 20px;
            height: 20px;
            background-color: #f472b6;
            top: 30%;
            right: 20%;
            animation: float 5s ease-in-out infinite;
        }
        
        .dot-3 {
            width: 35px;
            height: 35px;
            background-color: #facc15;
            bottom: 30%;
            left: 15%;
            animation: float 6s ease-in-out infinite;
        }
        
        .dot-4 {
            width: 25px;
            height: 25px;
            background-color: #34d399;
            bottom: 15%;
            right: 10%;
            animation: float 8s ease-in-out infinite;
        }
    </style>
</head>
<body class="bg-gradient-to-b from-blue-50 to-purple-50 h-screen relative">
    <div class="blob-background"></div>
    <div class="floating-dots">
        <div class="dot dot-1"></div>
        <div class="dot dot-2"></div>
        <div class="dot dot-3"></div>
        <div class="dot dot-4"></div>
    </div>
    
    <!-- iOS 状态栏 -->
    <div class="bg-black text-white flex justify-between items-center px-4 py-2">
        <div class="text-sm font-medium">9:41</div>
        <div class="flex space-x-1">
            <i class="fa-solid fa-signal"></i>
            <i class="fa-solid fa-wifi"></i>
            <i class="fa-solid fa-battery-full"></i>
        </div>
    </div>

    <!-- 主内容区 -->
    <div class="h-[calc(100%-112px)] overflow-y-auto no-scrollbar">
        <!-- 头部 -->
        <div class="px-6 py-5 bg-white border-b border-gray-200">
            <div class="flex items-center">
                <h1 class="text-2xl font-bold text-gray-800">设置</h1>
                <div class="ml-2 w-6 h-6 text-primary-400 animate-spin-slow">
                    <svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                        <path d="M15.9,18.45C17.25,17.4 18.31,16.04 19,14.47C19.86,14.06 20.34,13.12 20.21,12.13C20.12,11.34 19.61,10.68 19,10.3V8.82C19,7.16 18.04,5.73 16.56,5C15.47,3.4 13.87,2.3 12,2C10.13,2.3 8.53,3.4 7.44,5C5.96,5.73 5,7.16 5,8.82V10.3C4.39,10.68 3.88,11.35 3.79,12.13C3.66,13.12 4.14,14.06 5,14.47C5.69,16.04 6.75,17.4 8.1,18.45C8.65,19.9 9.89,21 11.37,21.21C13.77,21.54 15.94,20.3 16.9,18.45H15.9M17.97,9C18,8.94 18,8.88 18,8.82V7.73C18,7.38 17.88,7.03 17.66,6.76C16.73,5.69 15.07,5.1 12.45,5.08H11.55C8.93,5.1 7.26,5.68 6.34,6.76C6.12,7.03 6,7.38 6,7.73V8.82C6,8.88 6,8.94 6.03,9H17.97Z" />
                    </svg>
                </div>
            </div>
        </div>

        <!-- 用户信息卡片 -->
        <div class="profile-card px-6 py-5 mt-4 bg-white mx-6 rounded-xl shadow-sm border border-gray-200">
            <div class="flex items-center">
                <div class="relative mr-4">
                    <div class="absolute inset-0 rounded-full bg-gradient-to-br from-primary-300 to-primary-500 opacity-10 animate-pulse-slow"></div>
                    <img src="https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=880&q=80" alt="Profile" class="w-16 h-16 rounded-full relative object-cover border-2 border-white">
                </div>
                <div class="flex-1">
                    <h2 class="text-lg font-semibold text-gray-800">小伊同学</h2>
                    <p class="text-gray-500 text-sm">设计师 / 图标收藏家</p>
                </div>
                <button class="text-primary-500 font-medium text-sm flex items-center">
                    编辑
                    <i class="fa-solid fa-chevron-right ml-1 text-xs"></i>
                </button>
            </div>
            
            <div class="flex mt-5 justify-between">
                <div class="text-center px-4">
                    <p class="text-primary-500 font-semibold">32</p>
                    <p class="text-gray-500 text-sm">已下载</p>
                </div>
                <div class="text-center px-4 border-l border-r border-gray-200">
                    <p class="text-primary-500 font-semibold">15</p>
                    <p class="text-gray-500 text-sm">收藏</p>
                </div>
                <div class="text-center px-4">
                    <p class="text-primary-500 font-semibold">
                        <i class="fa-solid fa-infinity"></i>
                    </p>
                    <p class="text-gray-500 text-sm">Pro会员</p>
                </div>
            </div>
        </div>
        
        <!-- 设置分类区域 -->
        <div class="mt-6 px-6">
            <h3 class="text-gray-500 text-sm mb-3 flex items-center">
                <div class="w-5 h-5 bg-primary-100 rounded-full flex items-center justify-center text-primary-500 mr-2">
                    <i class="fa-solid fa-palette text-xs"></i>
                </div>
                界面设置
            </h3>
            
            <div class="bg-white rounded-xl overflow-hidden shadow-sm mb-6 border border-gray-200">
                <div class="settings-card px-4 py-3.5 flex items-center justify-between border-b border-gray-100">
                    <div class="flex items-center">
                        <div class="setting-icon w-8 h-8 rounded-full bg-blue-100 text-blue-500 flex items-center justify-center mr-3">
                            <i class="fa-solid fa-moon"></i>
                        </div>
                        <span class="text-gray-700">深色模式</span>
                    </div>
                    <label class="switch">
                        <input type="checkbox">
                        <span class="slider"></span>
                    </label>
                </div>
                
                <div class="settings-card px-4 py-3.5 flex items-center justify-between">
                    <div class="flex items-center">
                        <div class="setting-icon w-8 h-8 rounded-full bg-green-100 text-green-500 flex items-center justify-center mr-3">
                            <i class="fa-solid fa-wand-magic-sparkles"></i>
                        </div>
                        <span class="text-gray-700">卡通主题</span>
                    </div>
                    <label class="switch">
                        <input type="checkbox" checked>
                        <span class="slider"></span>
                    </label>
                </div>
            </div>
            
            <h3 class="text-gray-500 text-sm mb-3 flex items-center">
                <div class="w-5 h-5 bg-amber-100 rounded-full flex items-center justify-center text-amber-500 mr-2">
                    <i class="fa-solid fa-download text-xs"></i>
                </div>
                下载设置
            </h3>
            
            <div class="bg-white rounded-xl overflow-hidden shadow-sm mb-6 border border-gray-200">
                <div class="settings-card px-4 py-3.5 flex items-center justify-between border-b border-gray-100">
                    <div class="flex items-center">
                        <div class="setting-icon w-8 h-8 rounded-full bg-purple-100 text-purple-500 flex items-center justify-center mr-3">
                            <i class="fa-solid fa-folder"></i>
                        </div>
                        <div>
                            <span class="text-gray-700">下载路径</span>
                            <p class="text-gray-400 text-xs mt-0.5">~/Documents/IconHunter</p>
                        </div>
                    </div>
                    <button class="text-primary-500">
                        <i class="fa-solid fa-chevron-right"></i>
                    </button>
                </div>
                
                <div class="settings-card px-4 py-3.5 flex items-center justify-between border-b border-gray-100">
                    <div class="flex items-center">
                        <div class="setting-icon w-8 h-8 rounded-full bg-red-100 text-red-500 flex items-center justify-center mr-3">
                            <i class="fa-solid fa-image"></i>
                        </div>
                        <span class="text-gray-700">默认图像格式</span>
                    </div>
                    <div class="flex items-center">
                        <span class="text-gray-500 mr-2">PNG</span>
                        <button class="text-primary-500">
                            <i class="fa-solid fa-chevron-right"></i>
                        </button>
                    </div>
                </div>
                
                <div class="settings-card px-4 py-3.5 flex items-center justify-between">
                    <div class="flex items-center">
                        <div class="setting-icon w-8 h-8 rounded-full bg-pink-100 text-pink-500 flex items-center justify-center mr-3">
                            <i class="fa-solid fa-arrows-rotate"></i>
                        </div>
                        <span class="text-gray-700">自动清理缓存</span>
                    </div>
                    <label class="switch">
                        <input type="checkbox" checked>
                        <span class="slider"></span>
                    </label>
                </div>
            </div>
            
            <h3 class="text-gray-500 text-sm mb-3 flex items-center">
                <div class="w-5 h-5 bg-pink-100 rounded-full flex items-center justify-center text-pink-500 mr-2">
                    <i class="fa-solid fa-bell text-xs"></i>
                </div>
                通知设置
            </h3>
            
            <div class="bg-white rounded-xl overflow-hidden shadow-sm mb-6 border border-gray-200">
                <div class="settings-card px-4 py-3.5 flex items-center justify-between border-b border-gray-100">
                    <div class="flex items-center">
                        <div class="setting-icon w-8 h-8 rounded-full bg-blue-100 text-blue-500 flex items-center justify-center mr-3">
                            <i class="fa-solid fa-envelope"></i>
                        </div>
                        <span class="text-gray-700">推送通知</span>
                    </div>
                    <label class="switch">
                        <input type="checkbox" checked>
                        <span class="slider"></span>
                    </label>
                </div>
                
                <div class="settings-card px-4 py-3.5 flex items-center justify-between">
                    <div class="flex items-center">
                        <div class="setting-icon w-8 h-8 rounded-full bg-green-100 text-green-500 flex items-center justify-center mr-3">
                            <i class="fa-solid fa-newspaper"></i>
                        </div>
                        <span class="text-gray-700">新功能公告</span>
                    </div>
                    <label class="switch">
                        <input type="checkbox">
                        <span class="slider"></span>
                    </label>
                </div>
            </div>
            
            <h3 class="text-gray-500 text-sm mb-3 flex items-center">
                <div class="w-5 h-5 bg-blue-100 rounded-full flex items-center justify-center text-blue-500 mr-2">
                    <i class="fa-solid fa-circle-info text-xs"></i>
                </div>
                关于
            </h3>
            
            <div class="bg-white rounded-xl overflow-hidden shadow-sm mb-6 border border-gray-200">
                <div class="settings-card px-4 py-3.5 flex items-center justify-between border-b border-gray-100">
                    <div class="flex items-center">
                        <div class="setting-icon w-8 h-8 rounded-full bg-amber-100 text-amber-500 flex items-center justify-center mr-3">
                            <i class="fa-solid fa-code"></i>
                        </div>
                        <div>
                            <span class="text-gray-700">应用版本</span>
                            <p class="text-gray-400 text-xs mt-0.5">V2.0.3 (最新版)</p>
                        </div>
                    </div>
                    <div class="bg-green-100 text-green-600 text-xs px-2 py-0.5 rounded-full font-medium">
                        已是最新
                    </div>
                </div>
                
                <div class="settings-card px-4 py-3.5 flex items-center justify-between border-b border-gray-100">
                    <div class="flex items-center">
                        <div class="setting-icon w-8 h-8 rounded-full bg-purple-100 text-purple-500 flex items-center justify-center mr-3">
                            <i class="fa-solid fa-heart"></i>
                        </div>
                        <span class="text-gray-700">给我们评分</span>
                    </div>
                    <button class="text-primary-500">
                        <i class="fa-solid fa-chevron-right"></i>
                    </button>
                </div>
                
                <div class="settings-card px-4 py-3.5 flex items-center justify-between">
                    <div class="flex items-center">
                        <div class="setting-icon w-8 h-8 rounded-full bg-red-100 text-red-500 flex items-center justify-center mr-3">
                            <i class="fa-solid fa-bug"></i>
                        </div>
                        <span class="text-gray-700">问题反馈</span>
                    </div>
                    <button class="text-primary-500">
                        <i class="fa-solid fa-chevron-right"></i>
                    </button>
                </div>
            </div>
            
            <!-- 按钮区域 -->
            <div class="flex space-x-3 mb-10">
                <button class="button-primary flex-1 bg-primary-500 text-white py-3 rounded-xl font-medium shadow-md">
                    升级 Pro 会员
                </button>
                <button class="button-secondary flex-1 bg-white text-gray-500 py-3 rounded-xl font-medium border border-gray-300">
                    退出登录
                </button>
            </div>
        </div>
    </div>

    <!-- 底部导航栏 -->
    <div class="bg-white fixed bottom-0 w-full h-20 shadow-lg border-t border-gray-200 flex justify-around items-center px-6 rounded-t-3xl">
        <a href="#" class="flex flex-col items-center text-gray-400">
            <div class="w-12 h-12 rounded-full flex items-center justify-center mb-1">
                <i class="fa-solid fa-house text-xl"></i>
            </div>
            <span class="text-xs">首页</span>
        </a>
        <a href="#" class="flex flex-col items-center text-gray-400">
            <div class="w-12 h-12 rounded-full flex items-center justify-center mb-1">
                <i class="fa-solid fa-magnifying-glass text-xl"></i>
            </div>
            <span class="text-xs">搜索</span>
        </a>
        <a href="#" class="flex flex-col items-center text-gray-400">
            <div class="w-12 h-12 rounded-full flex items-center justify-center mb-1">
                <i class="fa-solid fa-clock-rotate-left text-xl"></i>
            </div>
            <span class="text-xs">历史</span>
        </a>
        <a href="#" class="flex flex-col items-center text-primary-500 relative">
            <div class="w-12 h-12 bg-primary-50 rounded-full flex items-center justify-center mb-1">
                <i class="fa-solid fa-gear text-xl"></i>
            </div>
            <span class="text-xs font-medium">设置</span>
            <span class="absolute w-1.5 h-1.5 bg-primary-500 rounded-full -bottom-1"></span>
        </a>
    </div>
</body>
</html> 